<template>
  <div>
    <van-sticky>
      <AppHeader />

      <van-tabs>
        <van-tab
          v-for="item in channelList"
          :key="item.id"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </van-sticky>

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      :offset="50"
      @load="onLoad"
    >
      <div class="wrap">
        <AppVideo v-for="video in list" :key="video.bvid" :data="video" />
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import { sleep } from "~/utils";
const { data: channelList } = await useFetch("/api/channel");
// 获取全部热门视频数据
const { data: hotList } = await useFetch("/api/hot");

const loading = ref(false); // 加载中...
const finished = ref(false); // 是否加载完全部数据
const list = ref<any[]>([]); // 页面显示的数据

const page = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示条数

// 加载下一页
const onLoad = async () => {
  console.log("onLoad", page.value);
  await sleep();

  const start = (page.value - 1) * pageSize.value;
  const end = page.value * pageSize.value;

  // 计算当前页的数据
  const nextList = hotList.value?.slice(start, end) as any[];

  // 将 page + 1
  page.value++;

  // 将当前页的数据追加到 list 中
  list.value = [...list.value, ...nextList];
  // 计算是否还有下一页的数据
  finished.value = list.value.length >= hotList.value?.length!;
  // 将 loading 设置为 false, 表示加载完成
  loading.value = false;
};

useSeoMeta({
  title: "哔哩哔哩",
  description: "一款好用的网站",
  keywords: "bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网",
});
</script>

<style lang="scss" scoped>
.wrap {
  padding: 0 5px;
}
</style>
